<template>
  <div>
    <van-nav-bar title="疫情展示" />

    <div class="swipe">
      <img src="../assets/yiqing.jpg" alt="">
    </div>

    <van-grid :border="false">
        <div class="info">
      <p class="title">
          <i></i>
          病毒信息
      </p>
  </div>
    </van-grid>
  <div class="case-num">
      <div class="container">
          <div class="title">
              <span>截至 全国数据统计</span>
          </div>
      </div>
      <div class="num">
          <ul class="count">
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(247,76,49)">39548</em>
                          </b>
                      </div>
                      <strong style="color:rgb(247,76,49)">652222</strong>
                      <span>现存确诊</span>
                  </div>
              </li>
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(247,130,7)">8</em>
                          </b>
                      </div>
                      <strong style="color:rgb(247,130,7)">18294</strong>
                      <span>现存疑似</span>
                  </div>
              </li>
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(162,90,78)">5270</em>
                          </b>
                      </div>
                      <strong style="color:rgb(162,90,78)">87294</strong>
                      <span>现存重症</span>
                  </div>
              </li>
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(174, 33, 44)">+40622</em>
                          </b>
                      </div>
                      <strong style="color:rgb(174, 33, 44)">949289</strong>
                      <span>累计确诊</span>
                  </div>
              </li>
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(93, 112, 146)">+19</em>
                          </b>
                      </div>
                      <strong style="color:rgb(93, 112, 146)">15469</strong>
                      <span>累计死亡</span>
                  </div>
              </li>
              <li>
                  <div class="create-item">
                      <div class="create-count">
                          <b>
                              较昨日
                              <em style="color:rgb(40, 183, 163)">+1055</em>
                          </b>
                      </div>
                      <strong style="color:rgb(40, 183, 163)">281598</strong>
                      <span>累计治愈</span>
                  </div>
              </li>
          </ul>
      </div>
  </div>


  <div class="chart">
      <h3 class="title">全国</h3>
      <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide v-for="(slide,index) in quanguoTrendChart" :key="index">
              <img :src="slide.imgUrl" alt="" style="    width: -webkit-fill-available;">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- <ul class="navigator">
          <li
            @click="changePage(index)"
            :class="{ active:index === currentIndex }"
            class="navigatorItem"
            v-for="(item,index) in quanguoTrendChart"
            :key="index"
          >{{ item.title }}</li>
      </ul> -->
  </div>


      <van-tabs v-model="active" id="tabs" color="#03a9f4">
      <van-tab :title="type.name" v-for="type in news" :key="type.id">
         <router-link :to="'/newsdetail/'+item.id" v-for="item in type.content" :key="item.id">
        <van-row class="news">
          <van-col span="18">
            <h3>{{item.title}}</h3>
            <p>{{item.create_time}}</p>
          </van-col>
          <van-col span="6">
            <van-image :src="path + item.img"></van-image>
          </van-col>
        </van-row>
     </router-link>
      </van-tab>
    </van-tabs>
  <my-bottom :active="0"></my-bottom>
  </div>
</template>

<script>
import axios from "axios"

import { mapState } from "vuex";

import MyBottom from '../components/MyBottom.vue'
export default {
  components:{MyBottom},
  data() {
    const vm = this;
    return {
      active: 0,
      news:[],
      currentIndex:0,
      swiperOption:{
                on:{
                    slideChangeTransitionEnd(){
                        vm.currentIndex = this.activeIndex
                    }
                }
      },
                  quanguoTrendChart:[
                 {
                    imgUrl:
                        "https://img1.dxycdn.com/2020/0220/014/3397684583507458039-135.png",
                },
                {
                    imgUrl:
                        "https://img1.dxycdn.com/2020/0220/697/3397684611424536901-135.png",
                },
                {
                    imgUrl:
                        "https://img1.dxycdn.com/2020/0220/861/3397684624309439853-135.png",
                },
                {
                    imgUrl:
                        "https://img1.dxycdn.com/2020/0220/168/3397686703073768694-135.png",
                },
                {
                    imgUrl:
                        "https://img1.dxycdn.com/2020/0220/709/3397686724548816431-135.png",
                }
            ]
    };
  },
      methods:{
        changePage(index){
            this.currentIndex = index  // 高亮
            this.$refs.mySwiper.swiper.slideTo(index,1000,false)  // swiper切换
        }
    },
  computed: {
    ...mapState({
      images: (state) => state.banners,
      icons: (state) => state.icons,
      path: (state) => state.path,
    }),
  },

};
</script>

<style  scoped>
>>> .van-nav-bar_title {
  font-size: 20px;
}
.swipe {
  text-align: center;
}
.swipe,
.swipe img {
  height: 208px;
  width: 100%;
}

#tabs {
  border-top: 1px solid lightgray;
}

.news {
  padding: 5px;
}
.case-num {
    padding: 0.16rem;
    background: #fff;
}
.container {
    margin: -0.16rem 0 0;
    font-size: 0.12rem;
}
.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08rem 0 0.07rem;
    line-height: 1.4rem;
}
.title span {
    color: #666;
}
.title em {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.24rem;
    margin-right: -0.16rem;
    padding: 0 0.08rem;
    color: #666;
    font-style: normal;
    background-color: #f7f7f7;
    border-radius: 0.12rem 0 0 0.12rem;
}
.title em img {
    width: 0.123rem;
    height: 0.123rem;
    margin-right: 0.037rem;
}
.num {
    position: relative;
    text-align: center;
    background: #fff;
}
.num::after {
    position: absolute;
    top: -0.01rem;
    left: -0.01rem;
    display: block;
    width: 200%;
    height: 200%;
    border: 0.01rem solid #ebebeb;
    border-radius: 0.08rem;
    box-shadow: 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.05);
    transform: scale(0.5);
    transform-origin: 0 0;
    content: "";
}
.num ul {
    flex-flow: wrap;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0.08rem 0 0.12rem;
}
.num ul li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 33.3333333%;
    margin: 10px 0;
}
.num ul li .create-item {
    position: relative;
    text-align: center;
}
.num ul li .create-item .create-count {
    display: flex;
    align-items: center;
    height: 0.12rem;
    margin-bottom: 0.02rem;
    color: #666;
    font-weight: 400;
    font-size: 0.09rem;
}
.num ul li .create-item .create-count em {
    font-weight: 400;
    font-style: normal;
}
.num ul li strong {
    margin-bottom: 0.01rem;
    font-weight: 700;
    font-size: 0.2rem;
    line-height: 0.25rem;
}
.num ul li span {
    display: block;
    color: #333;
    font-weight: 700;
    font-size: 0.11rem;
    line-height: 0.15rem;
}

</style>